<template>
  <div class="seller-orders">
    <h2>订单管理</h2>
    
    <!-- 订单列表 -->
    <el-card>
      <el-table :data="orders" v-loading="loading">
        <el-table-column prop="orderSn" label="订单号" width="150" />
        <el-table-column prop="totalAmount" label="金额" width="100">
          <template #default="scope">¥{{ scope.row.totalAmount }}</template>
        </el-table-column>
        <el-table-column prop="status" label="状态" width="100">
          <template #default="scope">
            <el-tag :type="getStatusType(scope.row.status)">
              {{ getStatusText(scope.row.status) }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="下单时间" width="180" />
        <el-table-column label="操作" width="120">
          <template #default="scope">
            <el-button 
              v-if="scope.row.status === 'PAID'"
              size="small" 
              type="primary" 
              @click="shipOrder(scope.row)"
            >
              发货
            </el-button>
            <el-button size="small" @click="viewOrder(scope.row)">查看</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import request from '@/utils/request'
import { useRouter } from 'vue-router'

const router = useRouter()
const loading = ref(false)
const orders = ref([])

// 获取状态类型
const getStatusType = (status) => {
  const map = { 'PENDING': 'warning', 'PAID': 'success', 'SHIPPED': 'primary', 'COMPLETED': 'success' }
  return map[status] || 'info'
}

// 获取状态文本
const getStatusText = (status) => {
  const map = { 'PENDING': '待付款', 'PAID': '已付款', 'SHIPPED': '已发货', 'COMPLETED': '已完成' }
  return map[status] || status
}

// 加载订单
const loadOrders = async () => {
  loading.value = true
  try {
    const response = await request.get('/api/seller/orders')
    if (response.success) {
      orders.value = response.data
    }
  } catch (error) {
    ElMessage.error('加载订单失败')
  } finally {
    loading.value = false
  }
}

// 发货
const shipOrder = async (order) => {
  try {
    await request.post(`/api/seller/orders/${order.orderId}/ship`)
    ElMessage.success('发货成功')
    loadOrders()
  } catch (error) {
    ElMessage.error('发货失败')
  }
}

// 查看订单
const viewOrder = (order) => {
  router.push(`/seller/orders/${order.orderId}`)
}

onMounted(() => {
  loadOrders()
})
</script>

<style scoped>
.seller-orders {
  max-width: 1000px;
  margin: 0 auto;
}

h2 {
  margin-bottom: 20px;
  color: #303133;
}
</style> 